<template>
    <div class="pages_contact">
        <div class="side_left">
            <div class="search_view">
                <el-input v-model="value" :placeholder="$t('placeholder.请输入内容')" @change="confirm"></el-input>
                <div class="search_img"><img src="@/assets/image/add2.png" alt=""></div>
            </div>
            <div class="side_left_item" v-for="item in list" :key="item.type"
                :class="active == item.type ? 'active' : ''" @click="change(item.type)">
                <img :src="item.img" alt="">
                <div>{{ item.name }}</div>
            </div>
        </div>
        <router-view />
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: "",
            list: [{
                name: this.$t('msg.新的好友'),
                img: require('@/assets/image/f1.png'),
                type: "newFriend"
            }, {
                name: this.$t('msg.好友'),
                img: require('@/assets/image/f2.png'),
                type: "friend"
            }, {
                name: this.$t('msg.社团'),
                img: require('@/assets/image/f3.png'),
                type: "group"
            }, {
                name: this.$t('msg.关注'),
                img: require('@/assets/image/f4.png'),
                type: "follow"
            }, {
                name: this.$t('msg.收藏'),
                img: require('@/assets/image/f5.png'),
                type: "collect"
            }, {
                name: this.$t('msg.邀请'),
                img: require('@/assets/image/f6.png'),
                type: "invitation"
            }],
            active: "newFriend",
        }
    },
    created() {
        this.active = this.$route.name;
    },



    methods: {
        confirm() {
            this.$store.commit('setContactKeywords', this.value);
        },
        change(value) {
            if (this.active === value) return;
            this.active = value;
            this.keywords = this.value = "";
            this.$router.replace({
                name: value
            })
        }
    }
}
</script>
<style lang="scss">
.pages_contact {
    flex: 1;
    overflow: hidden;
    background: #EDEDED;
    display: flex;

    .side_left {
        width: 456px;
        height: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        background: #FCFCFE;
        box-shadow: inset -1px 0px 0px 0px rgba(104, 104, 104, 0.1);

        .search_view {
            width: 100%;
            height: 44px;
            padding: 24px 0px;
            box-sizing: content-box;
            display: flex;
            justify-content: space-between;

            .el-input__inner {
                height: 44px;
            }

            .search_img {
                padding-left: 20px;

                img {
                    width: 44px;
                    height: 44px;
                }
            }
        }

        &_item {
            height: 88px;
            padding-left: 24px;
            box-sizing: border-box;
            cursor: pointer;
            display: flex;
            align-items: center;

            &.active {
                background-color: #D9E7FE;
            }

            &:hover:not(&.active) {
                background: #e3e3e3
            }

            img {
                width: 52px;
                height: 52px;
            }

            div {
                margin-left: 12px;
                font-size: 18px;
                color: #333333;

                &.badge {
                    width: 16px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    color: #fff;
                    font-size: 12px;
                    border-radius: 9px;
                    background: #FA5151;
                }
            }
        }
    }

    .side_right {
        flex: 1;
        display: flex;
    }
}
</style>